import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Button } from 'antd';
import { WeaErrorPage, WeaTools, WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

const store = ['routing', 'emailMainStore', 'emailOpsStore', 'emailPrintStore'];

@inject(...store)
@observer
class PrintEmail extends React.Component {
  componentDidMount() {
    const {
      emailPrintStore: { doInit },
    } = this.props;
    function fn(props) {
      return new Promise(() => {
        // resolve(doInit({type:3,mailId:props.location.query.mailId})) //这是一个异步函数
        doInit({ type: 3, mailId: props.location.query.mailId });
      });
    }
    let fn_1 = async function (props) {
      await fn(props); // 等待异步操作执行完了后执行的方法
      // printEmail();
    };
    fn_1(this.props);

    jQuery('body').css('overflow', 'visible');
    jQuery('html').css('overflow', 'auto');
    jQuery('html').css('height', '96%');
    jQuery('#container').css('overflow', 'visible');
  }

  // 获取邮件基本信息
  getBaseInfo = () => {
    const {
      emailPrintStore: { baseInfo, allSpan },
    } = this.props;

    if (!baseInfo.fromSpan) return null;
    if (baseInfo.fromSpan !== 'undefined') {
      const {
        fromSpan,
        toSpan,
        ccSpan,
        subject,
        senddate,
        fileInfos,
        isShowBcc,
      } = baseInfo;
      const { showName } = fromSpan;
      const { fileList, count } = fileInfos;
      const list = [
        <div className="email_print_content_base_title">
          <span>{subject}</span>
        </div>,
        <div className="email_print_content_base_send">
          <span className="base_send">{`${getLabel('2034', '发件人')}:`}</span>
          <span className="sendPerson">{showName}</span>
        </div>,
        <div className="email_print_content_base_to">
          <span className="base_send">{`${getLabel(2046, '收件人')}:`}</span>
          {toJS(toSpan.list).map(({ showName: _showName }) => (
            <span className="email_print_content_base_name">{_showName}</span>
          ))}
        </div>,
      ];
      ccSpan &&
        ccSpan.list &&
        ccSpan.list.length > 0 &&
        list.push(
          <div className="email_print_content_base_to">
            <span className="base_send">{`${getLabel(17051, '抄送人')}:`}</span>
            {toJS(ccSpan.list).map(({ showName: ccname }) => (
              <span className="email_print_content_base_name">{ccname}</span>
            ))}
          </div>,
        );
      if (allSpan.hasInfo && isShowBcc === 1) {
        list.push(
          <div className="email_print_content_base_to">
            <span className="base_send">{`${getLabel(81316, '密送人')}:`}</span>
            {allSpan.bccTipInfo ? (
              <span
                style={{ color: 'red' }}
                className="email_print_content_base_name"
              >
                {allSpan.bccTipInfo}
              </span>
            ) : (
              toJS(allSpan.list).map(({ showName: allname }) => (
                <span className="email_print_content_base_name">{allname}</span>
              ))
            )}
          </div>,
        );
      }
      list.push(
        <div className="email_print_content_base_time">
          <span className="base_send">{`${getLabel('506453', '时 间')}:`}</span>
          <span>{senddate}</span>
        </div>,
      );
      count > 0 &&
        list.push(
          <div className={`${this.prefixClass}-base-files`}>
            <span className="base_send"> {`${getLabel(156, '附件')}:`}</span>
            <span>
              {count}
              {getLabel(27591, '个')}(
              {fileList.map(({ filename }) => (
                <span className="email_print_content_base_name">
                  {filename}
                </span>
              ))}
              )
            </span>
          </div>,
        );

      return list;
    }
  };

  getContent = () => {
    const {
      emailPrintStore: { mailContent },
    } = this.props;
    return <div dangerouslySetInnerHTML={{ __html: mailContent }} />;
  };

  cancelMail = () => {
    window.history.back();
  };

  printBtn = () => {
    const {
      emailPrintStore: { btnDisplay, printEmail },
    } = this.props;
    return (
      <div
        className="email_print_btn"
        ref="printBtn"
        style={{ display: `${btnDisplay}` }}
      >
        <Button
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_Button@z943z5`}
          onClick={printEmail}
        >
          {getLabel('506402', '打印该邮件')}
        </Button>
      </div>
    );
  };

  render() {
    return (
      <div className="email_print">
        {this.printBtn()}
        <div className="email_print_content">
          <div className="email_print_content_base">{this.getBaseInfo()}</div>
          <div className="email_print_content_main">{this.getContent()}</div>
        </div>
        {this.printBtn()}
      </div>
    );
  }
}

export default WeaTools.tryCatch(
  React,
  props => (
    <WeaErrorPage
      ecId={`${
        (this && this.props && this.props.ecId) || ''
      }_WeaErrorPage@bzl9t6`}
      msg={
        props.error
          ? props.error
          : getLabel(186, '对不起，该页面异常，请联系管理员！', 'error')
      }
    />
  ),
  { error: '' },
)(PrintEmail);
